<template>
  <div class="tablec">
    <div class="header">
      <div class="title1">{{ title }}</div>
      <Select v-model="checkList" >
        <template slot="left">
          <el-button size="small" type="primary" @click="exportData">导出</el-button>
        </template>
      </Select>
    </div>
    <el-table
      :row-class-name="rowClass"
      :data="tableData"
      style="width: 100%"
      :height="!isTop ? 300 : 500"
    >
      <el-table-column
        label-class-name="column1 column10"
        align="center"
        label="项目名称"
      >
        <el-table-column
          prop="time"
          label="时间"
          label-class-name="column1"
          class-name="column1"
          align="center"
          width="120"
        />
      </el-table-column>

      <el-table-column
        v-if="checkList.includes('中长期')"
        label-class-name="column2 column10"
        align="center"
        label="中长期"
      >
        <el-table-column
          label-class-name="column2"
          align="center"
          prop="midLongTermPower"
          label="电量"
        />
        <el-table-column
          label-class-name="column2"
          class-name="column3"
          align="center"
          prop="midLongTermPrice"
          label="电价"
        />
        <el-table-column
          label-class-name="column2"
          class-name="column3"
          align="center"
          prop="midLongTermCost"
          label="电费"
        />
      </el-table-column>

      <el-table-column
        v-if="checkList.includes('日前')"
        label-class-name="column4 column10"
        align="center"
        label="日前"
      >
        <el-table-column
          label-class-name="column4"
          align="center"
          prop="dayAheadClearedPower"
          label="出清电量"
        />
        <el-table-column
          label-class-name="column4"
          class-name="column5"
          align="center"
          prop="dayAheadDeviationPower"
          label="偏差电量"
        />
        <el-table-column
          label-class-name="column4"
          align="center"
          prop="dayAheadClearedPrice"
          label="出清电价"
        />
        <el-table-column
          label-class-name="column4"
          align="center"
          prop="dayAheadCost"
          label="电费"
        />
      </el-table-column>

      <el-table-column
        v-if="checkList.includes('实时')"
        label-class-name="column6 column10"
        align="center"
        label="实时"
      >
        <el-table-column
          label-class-name="column6"
          align="center"
          prop="realTimeClearedPower"
          label="出清电量"
        />
        <el-table-column
          label-class-name="column6"
          class-name="column7"
          align="center"
          prop="realTimeDeviationPower"
          label="偏差电量"
        />
        <el-table-column
          label-class-name="column6"
          align="center"
          prop="realTimeClearedPrice"
          label="出清电价"
        />
        <el-table-column
          label-class-name="column6"
          align="center"
          prop="realTimeCost"
          label="电费"
        />
      </el-table-column>

      <el-table-column
        v-if="checkList.includes('结算')"
        label-class-name="column8 column10"
        align="center"
        label="结算"
      >
        <el-table-column
          label-class-name="column8"
          align="center"
          prop="settlementPower"
          label="电量"
        />
        <el-table-column
          label-class-name="column8"
          align="center"
          prop="settlementAvgPrice"
          label="电价"
        />
        <el-table-column
          label-class-name="column8"
          class-name="column9"
          align="center"
          prop="settlementCost"
          label="电费"
        />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from "moment";
import Select from "./Select.vue";
import { dailySummaryExport, powerTradingDataExport } from "@/api/table";
import { baseUrl } from "@/api/api";

function toFixed(val, fix = 3) {
  return val ? Number(val) : val
}

export default {
  components: {
    Select,
  },
  props: {
    title: {
      type: String,
      default: "表格",
    },
    data: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Array,
      default: () => ({}),
    },
    dataType: {
      type: Array,
      default: '日期',
    },
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    checkList(val) {
      console.log(val, "checkList------");
    },
  },
  data() {
    return {
      checkList: ["中长期", "日前", "实时", "结算"],
      tableData: [],
    };
  },
  created() {
    this.init(this.data);
  },
  computed: {
    isTop() {
      return this.$store.state.setting.isTop;
    },
  },
  methods: {
    async exportData(){
      console.log(this.dataType,this.params,'导出-----');
      const params = this.params
      if (!params) {
        return
      }
      let str = ''
      Object.keys(params).forEach(kk=>{
        str += kk
        str += ('=' + params[kk]) + '&'
      })
      console.log(str,'str----------');
      if (this.dataType === '天') {
        this.openAndCloseWindow(`${baseUrl}/powerTradingData/export?${str}`)
          
      }else if (this.dataType === '日期') {
        //  const res = await dailySummaryExport(params)
         this.openAndCloseWindow(`${baseUrl}/dailySummary/export?${str}`)
      }
    },
    openAndCloseWindow(val){
      // 打开新窗口
        let newWindow = window.open(val.replace(/&+$/, ''), '_blank');
    
        // 3秒后关闭窗口
        setTimeout(() => {
          if (newWindow && !newWindow.closed) {
            newWindow.close();
            newWindow = null
            console.log('窗口已关闭');
          }
        }, 10000);
    },
    init(val){
      val.forEach(item => {
        item.time =  item.summaryDate || ((item.hour || item.hour === 0) && (item.hour.toString() + ':00'))
        // 中长期
        item.midLongTermPower = toFixed(item.midLongTermPower, 3)
        item.midLongTermPrice = toFixed(item.midLongTermPrice, 0)
        item.midLongTermCost = toFixed(item.midLongTermCost, 3)
        
        // 日前
        item.dayAheadClearedPower = toFixed(item.dayAheadClearedPower, 3)
        item.dayAheadDeviationPower = toFixed(item.dayAheadDeviationPower, 3)
        item.dayAheadClearedPrice = toFixed(item.dayAheadClearedPrice, 2)
        item.dayAheadCost = toFixed(item.dayAheadCost, 4)

        // 实时
        item.realTimeClearedPower = toFixed(item.realTimeClearedPower, 3)
        item.realTimeDeviationPower = toFixed(item.realTimeClearedPower, 2)
        item.realTimeClearedPrice = toFixed(item.realTimeClearedPrice, 2)
        item.realTimeCost = toFixed(item.realTimeCost, 4)

        // 结算
        item.settlementPower = toFixed(item.realTimeCost, 3)
        item.settlementAvgPrice = toFixed(item.settlementAvgPrice, 6)
        item.settlementCost = toFixed(item.settlementCost, 7)

      });
      this.tableData = val
    },
    rowClass({ row }) {
      if (row.time === "合计") {
        return "column11";
      }
    },
  },
};
</script>

<style lang="scss" scope>
.column1 {
  background: #f9fafd !important;
}
.column2 {
  background: #d9ecff !important;
}
.column3 {
  background: #f5faff;
}
.column4 {
  background: #e3f7ff !important;
}
.column5 {
  background: #f8fdff;
}
.column6 {
  background: #dff7ec !important;
}
.column7 {
  background: #f7fdfa;
}
.column8 {
  background: #f6edff !important;
}
.column9 {
  background: #fdfaff;
}
.column10 {
  font-weight: 600;
  color: black;
}
.column11 {
  td {
    font-weight: 600;
    color: black;
    background: #fffaee !important;
  }
}
.tablec {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    .title1 {
      font-size: 24px;
      font-weight: 600;
      min-width: 100px;
    }
  }
}
</style>
